<template>
        <view>
            <view class="Narbar">
                <view class="back" :style="{ height: heightConfig.navBarPaddingTop + 'px' }"></view>
                <view class="Narbar_bo">
                    <view @click="back"><u-icon name="arrow-left" ></u-icon></view>
                    <!-- <view></view> -->
                    <view class="title" size="19px">我的客服</view>
                    <view></view>
                </view>
            
                <view class="box">
                    <view class="ques" style="display: flex;">
                        <view class="quesImg">
                            <image src="/static/images2/我的客服聊天.png" mode=""></image>
                        </view>
                        <view class="quesText">
                            常见问题
                        </view>
                    </view>
                    <view class="quesText2" v-for="item in dataList">
                          {{item.content}}
                    </view>
                </view>
           
                   <view class="button">                    <view @click="toPhone" class="staffService" style="color: white;">                        人工客服                    </view>                </view>
                </view> 
            </view>
</template>

<script>
    import integralApi from "@/api/integral";
    import {
        getToken
    } from "@/utils/auth";
    import {
        formatBigNumber
    } from "@/utils/index";
    import {
        baseImgUrl
    } from "@/config";
    import userApi from "@/api/user";
    export default {
        data() {
            return {
                baseImgUrl,
                heightConfig: {},
                creditScore: 0,
                remainingSum: 0,
                goodId: null,
                dataList: [{content:"常规线上预约的流程是什么?"},{content:"常规线上预约的流程是什么?"},{content:"常规线上预约的流程是什么?"}],
                memberUserInfo: {},
                gridList: [{
                        image: "../static/images/myPoints/pointsMall/getPoints.png",
                        name: "获取积分",
                        url: "/subPages/mine/myPoints",
                    },
                    {
                        image: "../static/images/myPoints/pointsMall/PointsInfo.png",
                        name: "积分明细",
                        url: "/subPages/mine/integralDetail",
                    },
                    // {
                    //   image: "../static/images/myPoints/pointsMall/PointsRule.png",
                    //   name: "积分规则",
                    //   url: "",
                    // },
                ],
            };   
        },
        onLoad() {
            this.heightConfig = this.$store.getters.heightData;
        },
        onShow() {
            const token = getToken();
            if (!token) {
                uni.navigateTo({
                    // url: "/pages/login",
                });
                return;
            }
			
            this.getIntegralGoodList();
            this.getUserInfo();
        },
        methods: {
            // 获取用户信息
            getUserInfo() {
                userApi.fetchUserInfo().then((res) => {
                    if (res.code == 200) {
                        this.memberUserInfo = res.memberUserInfo;
                    }
                });
            },
			toPhone(){
				wx.makePhoneCall({
				phoneNumber: 1008611,
				})
			},
			back(){
				uni.navigateBack({
				delta:1,//返回层数，2则上上页
				})
			},
            getList(pageNum, pageSize) {
                integralApi
                    .getIntegralGoodList()
                    .then((res) => {
                        if (res.code == 200) {
                            // this.creditScore = formatBigNumber(res.data.creditScore);
                            this.creditScore = res.data.creditScore;
                            this.remainingSum = formatBigNumber(res.data.remainingSum);
                            this.$refs.paging.complete(res.data.appletBdmIntegralGoodVos);
                        }
                    })
                    .catch(() => {
                        this.$refs.paging.complete(false);
                    });
            },
            getIntegralGoodList() {
                integralApi.getIntegralGoodList().then((res) => {
                    if (res.code == 200) {
                        // this.creditScore = formatBigNumber(res.data.creditScore);
                        this.creditScore = res.data.creditScore;
                        this.remainingSum = formatBigNumber(res.data.remainingSum);
                        this.dataList = res.data.appletBdmIntegralGoodVos;
                    }
                });
            },
            toPage(url) {
                uni.navigateTo({
                    url: url,
                });
            },
            toPay(item) {
                const token = getToken();
                if (!token) {
                    uni.navigateTo({
                        // url: "/pages/login",
                    });
                } else {
                    uni.navigateTo({
                        url: `/subPages/details/confirmOrder?source=integral&id=${item.id}&price=${item.price}&integral=${item.integral}`,
                    });
                }
            },
            sumbit() {},
        },
    };
</script>

<style lang="less" scoped>
    .Narbar {
        width: 100%;
        height: 300px;
      
        
        background-size: 100% 100%;

        .back {
            width: 100%;
        }

        .Narbar_bo {
            width: 100%;
            height: 35px;
            display: flex;
            padding: 0 28rpx;
            justify-content: space-between;
            align-items: center;

            .title {
                font-size: 18px;
                font-weight: 600;
            }
        }

        }
        .box{
            width: 686rpx;
            height: 404rpx;
            background: linear-gradient( 179deg, #DAEFFF 0%, #FFFFFF 23%);
            border-radius: 24rpx 24rpx 24rpx 24rpx;
			// margin: 100rpx auto;
            margin:56rpx 0 0 32rpx;
        }
        .quesImg{
            margin:22rpx 0 0 38rpx;
            width:48rpx;
            height:48rpx;
            image{
                width:100%;
                height:100%;
            }
        }
        .quesText{
            margin-top: 24rpx;
            width: 128rpx;
            height: 44rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 32rpx;
            color: #333333;
            text-align: center;
            font-style: normal;
            text-transform: none;
        }
        .quesText2{
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 26rpx 0 0 52rpx;
            width: 504rpx;
            height: 76rpx;
            background: #F4FAFF;
            border-radius: 44rpx 44rpx 44rpx 44rpx;
        }
        .button{
			display: flex;
            position: fixed;
			bottom: 136rpx;
			height: 68rpx;
		    width: 100%;
            // margin-top: ;
           
        }
        .staffService{
            display: flex;
            justify-content: center;
            align-items: center;
            // margin-right: 42rpx;
            width: 304rpx;
			margin: 0 auto;
            height: 68rpx;
            background: #159DFF;
            border-radius: 64rpx 64rpx 64rpx 64rpx;
        }
        .telHot{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 304rpx;
            height: 68rpx;
            border-radius: 64rpx 64rpx 64rpx 64rpx;
            border: 2rpx solid #159DFF;
        }
</style>